<template>
  <div class="content_box">
    <div class="content">
      <div class="bj">
        <div class="head_title" :style="{height:navBarHeight+'px'}">
          <div class="box">
            <p :style="{height:statusBarHeight+'px'}"></p>
            <div @click="switchStore" class="title_box" :style="{height:titleBarHeight+'px'}">
              <p class="text">杠小二 · 大学城店</p>
              <p class="sjx"></p>
            </div>
          </div>
        </div>
        <div class="sy_box">
          <div class="top_box">
            <div class="top_s">
              <p class="text">总收益（元）<span @click="totalRevenueModel">?</span></p>
              <p class="num">
                <!-- <ui-count-up num="1255" width='16' height='34' fontSize='28'></ui-count-up> -->
                1255
              </p>
              <p class="label" @click="toDetailed">查看流水</p>
            </div>
            <p class="line"></p>
            <div class="top_s">
              <p class="text">可提现金额（元）<span @click="availableModel">?</span></p>
              <p class="num">
                <!-- <ui-count-up num="1255" width='16' height='34' fontSize='28'></ui-count-up> -->
                1255
              </p>
              <p class="label" @click="toTiXian">去提现</p>
            </div>
          </div>
          <div class="sx_tab">
            <p class="on">今天</p>
            <p>昨天</p>
            <p>近7天</p>
            <p>本月</p>
            <p>全部</p>
          </div>
          <div class="bottom_tab">
            <div class="box">
              <p class="num">
                <!-- <ui-count-up num="45" width='12' height='24' fontSize='20'></ui-count-up> -->
                45
              </p>
              <p class="text">今日收益</p>
            </div>
            <div class="box">
              <p class="num">
                <!-- <ui-count-up num="500" width='12' height='24' fontSize='20'></ui-count-up> -->
                500
              </p>
              <p class="text">7日收益</p>
            </div>
            <div class="box">
              <p class="num">
                <!-- <ui-count-up num="1560" width='12' height='24' fontSize='20'></ui-count-up> -->
                1560
              </p>
              <p class="text">当月收益</p>
            </div>
          </div>
        </div>
        <div class="line_box">
          <p class="line"></p>
          <p class="text">常用功能</p>
        </div>
        <div class="lanmu_box">
          
          <div class="tab">
            <div class="box skeleton-rect" @click="toTiXian">
              <img src="/static/images/index_icon2.png" alt="">
              <p class="text">收益提现</p>
            </div>
            <div class="box skeleton-rect" @click="toWithdrawal">
              <img src="/static/images/index_icon1.png" alt="">
              <p class="text">提现记录</p>
            </div>
            <div class="box skeleton-rect" @click="toDetailed">
              <img src="/static/images/index_icon3.png" alt="">
              <p class="text">收益明细</p>
            </div>
          
          </div>
        </div>
        <div class="line_box">
          <p class="line"></p>
          <p class="text">店铺合伙人</p>
        </div>
        <div class="hhr_box">
          <div class="box">
            <div class="top">
              <img src="/static/images/avter.jpg" alt="">
              <p class="name">程旭</p>
              <p class="label">股东</p>
            </div>
            <div class="bottom">
              <div class="nr">
                <p class="num">70%</p>
                <p class="text">分成比</p>
              </div>
              <div class="nr">
                <p class="num">1500</p>
                <p class="text">分成收益</p>
              </div>
              <div class="nr">
                <p class="num">535</p>
                <p class="text">已提现</p>
              </div>
              
            </div>
          </div>
          <div class="box">
            <div class="top">
              <img src="/static/images/avter.jpg" alt="">
              <p class="name">王波文</p>
              <p class="label">股东</p>
            </div>
            <div class="bottom">
              <div class="nr">
                <p class="num">30%</p>
                <p class="text">分成比</p>
              </div>
              <div class="nr">
                <p class="num">****</p>
                <p class="text">分成收益</p>
              </div>
              <div class="nr">
                <p class="num">****</p>
                <p class="text">已提现</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="change_store_box">
        <van-popup 
        :show="isStore" 
        position="left"
        @close="closeStore"
        >
          <div class="pop_box">
            <div class="left">
              <p :style="{height:navBarHeight+'px'}"></p>
              <div 
                @click="clickStore(item.id)" 
                :class="item.storeName == storeMsg.storeName?'box on':'box'"
                v-for="(item,index) in storeList" :key="index"
              >
                <div class="img">
                  <img src="/static/images/my_flg.png" alt="">
                  <p class="gou" v-if="item.storeName == storeMsg.storeName"><van-icon name="success" /></p>
                </div>
                <p class="text">{{item.storeName}}</p>
              </div>
            </div>
          </div>
        </van-popup>
      </div>
  </div>
</template>
 
<script>

import {
  
} from "@/api/index";

export default {
  components: {},
  data() {
    return {
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
      isStore:false,
    };
  },
  onShow() {
  },
  onLoad(options) {
  },

  methods: {

    // 总收益问号
    totalRevenueModel(){
      wx.showModal({
        title: '提示',
        content: '当前用户总收益，总收益=可提现金额+提现中金额',
        confirmText:'我知道了',
        showCancel:false,
         success: (res)=>{
          if (res.confirm) {
          } 
        }
      })
    },

    // 可提现问号
    availableModel(){
      wx.showModal({
        title: '提示',
        content: '当前可提现金额',
        confirmText:'我知道了',
        showCancel:false,
         success: (res)=>{
          if (res.confirm) {
          } 
        }
      })
    },

    // 关闭弹窗
    closeStore(){
      this.isStore = false
    },

    // 切换店铺-弹窗
    switchStore(){
      this.isStore = true
    },

    // 跳转提现记录
    toWithdrawal(){
      wx.navigateTo({
        url: `/pages/partner/withdrawal/main`,
      });
    },

    // 跳转明细
    toDetailed(){
      wx.navigateTo({
        url: `/pages/partner/detailed/main`,
      });
    },

    // 跳转提现
    toTiXian(){
      wx.navigateTo({
        url: `/pages/partner/fundAdmin/main`,
      });
    }
  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      },
    });
  },
  onHide() {},
  onUnload() {
  },
  onTabItemTap(){
    wx.vibrateShort({type:'heavy'});
  }
};
</script>

<style lang="scss" scoped>
.content_box {
  min-height: 100vh;
  background: #f5f5f5;
  .bj{
    width: 100%;
    height: 400rpx;
    background-image: linear-gradient(to right, #3176FE , #1E6AFF);
    .head_title{
      .box{
        position: fixed;
        top:0;
        left: 0;
        width: 100%;
        z-index: 100;
      }
      .title_box{
        display: flex;
        align-items: center;
        margin-left:30rpx;
        font-size:32rpx;
        font-weight: 500;
        width: 50%;
        color:#fff;
        .sjx{
          width: 0;
          height: 0;
          border-top: 5px solid #fff;
          border-right: 5px solid transparent;
          border-left: 5px solid transparent;
          margin-left:10rpx;
        }
        .text{
          height: 50rpx;
        }
      }
    }
    .sy_box{
      padding:30rpx;
      background: #fff;
      width: 84%;
      margin:0 auto;
      border-radius: 15rpx;
      margin-top:30rpx;
      .top_box{
        display: flex;
        justify-content: space-around;
        align-items: center;
        .line{
          width: 1px;
          height: 100rpx;
          background: #f5f5f5;
        }
      }
      .sx_tab{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size:30rpx;
        font-weight: 500;
        color:#666;
        margin-top:50rpx;
        .on{
          color:#fff;
          background: #1E6AFF;
          padding:4rpx 20rpx;
          border-radius: 30rpx;
        }
      }
      .top_s{
        text-align: center;
        color:#333;
        .text{
          font-size:28rpx;
          color:#666;
          span{
            display: inline-block;
            width: 30rpx;
            height: 30rpx;
            line-height: 30rpx;
            background: #1E6AFF;
            color:#fff;
            font-size:24rpx;
            text-align: center;
            border-radius: 50%;
          }
        }
        .num{
          font-size:56rpx;
          margin-top:20rpx;
          font-weight: 500;
          text-align: center;
          /deep/ .number-box{
            justify-content: center;
          }
        }
        .label{
          font-size:28rpx;
          color:#1E6AFF;
          margin-top:4rpx;
        }
      }
      .bottom_tab{
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: center;
        margin-top:20rpx;
        .text{
          font-size:28rpx;
          color:#666;
          margin-top:6rpx;
        }
        .num{
          font-size:40rpx;
          margin-top:10rpx;
          font-weight: 500;
          /deep/ .number-box{
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
    .line_box{
      display: flex;
      align-items: center;
      padding:30rpx;
      .line{
        width: 4rpx;
        height: 30rpx;
        background: #1E6AFF;
      }
      .text{
        font-size:30rpx;
        font-weight: 500;
        margin-left:10rpx;
      }
    }
    .lanmu_box{
      width: 92%;
      background: #fff;
      border-radius: 15rpx;
      margin:0 auto;
      padding-top:40rpx;
      .tab{
        display: flex;
        text-align: center;
        justify-content: space-between;
        flex-wrap:wrap;
        .box{
          width: 30%;
          font-size:28rpx;
          font-size:#333;
          margin-bottom:40rpx;
        }
        img{
          width: 60rpx;
          height: 60rpx;
          margin-bottom:10rpx;
        }
      }
    }
    .hhr_box{
      .box{
        width: 92%;
        background: #fff;
        border-radius: 15rpx;
        margin:0 auto;
        margin-bottom:20rpx;
        .top{
          display: flex;
          align-items: center;
          height: 80rpx;
          border-bottom:1px solid #f5f5f5;
          img{
            width: 34rpx;
            height: 34rpx;
            border-radius: 50%;
            margin:0 10rpx 0 30rpx;
          }
          .name{
            font-size:30rpx;
            font-weight: 500;
          }
          .label{
            padding:2rpx 15rpx;
            font-size:22rpx;
            color:#fff;
            background: #1E6AFF;
            border-radius: 30rpx;
            margin-left:10rpx;
            border-bottom-left-radius: 0;
            &.on{
              background: #F9BC04;
            }
          }
        }
        .bottom{
          display: flex;
          align-items: center;
          justify-content: space-around;
          text-align: center;
          height: 160rpx;
          .text{
            font-size:26rpx;
            color:#666;
            margin-top:6rpx;
          }
          .num{
            font-size:32rpx;
            margin-top:10rpx;
            font-weight: 500;
          }
        }
      }
    }
  }
}
.change_store_box{
    position: relative;
    /deep/ .van-popup{
      height: 100vh;
    }
    .pop_box{
      display: flex;
      .left{
        width: 200rpx;
        min-height: 100vh;
        background: #F9FAFE;
        text-align: center;
        .box{
          margin:0 auto;
          text-align: center;
          margin-bottom:50rpx;
          .img{
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            border:2px solid transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            margin:0 auto;
            img{
              width: 88rpx;
              height: 88rpx;
              border-radius: 50%;
            }
            .gou{
              width: 30rpx;
              height: 30rpx;
              background: #1E6AFF;
              border-radius: 50%;
              color:#fff;
              font-size:22rpx;
              position: absolute;
              bottom:0;
              right:0;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          .text{
            font-size:26rpx;
            color:#25252E;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 80%;
            margin:20rpx auto 0 auto;
          }
          &.on{
            .img{
              border-color:#1E6AFF;
            }
          }
        }
      }
      .right{
        flex: 1;
        padding:0 30rpx;
        position: relative;
        .msg{
          .name_box{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .name{
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-weight: 500;
              font-size:34rpx;
              img{
                width: 46rpx;
                height: 46rpx;
                border-radius: 50%;
                margin-right:10rpx;
              }
            }
            .icon{
              color:#666;
              font-size:28rpx;
            }
          }
          .tell{
            color:#666;
            font-size:26rpx;
            margin:10rpx 0 20rpx 0;
          }
          .anniu{
            display: inline-block;
            padding:4rpx 10rpx;
            background: #1E6AFF;
            color:#fff;
            font-size:28rpx;
            border-radius: 6rpx;
          }
        }
        .list_box{
          margin-top:100rpx;
          .box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size:30rpx;
            color:#222;
            border-bottom:1px solid #f5f5f5;
            height: 90rpx;
            .icon{
              color:#666;
            }
          }
        }
        .outLogin{
          position: absolute;
          bottom:100rpx;
          width: 86%;
          text-align: center;
          font-size:30rpx;
          color:#FF4D50;
        }
      }
    }
  }
</style>
